<script lang="ts">
  import Title from "../components/Title.svelte";
  import Card from "../components/card.svelte";
  import CurveChart from "../components/curveChart.svelte";

  import LineChart from '../components/lineChart.svelte'
  import InitPieChart from '../components/InitPieChart.svelte'

  let notices = [
    "<span>asdasdasdasda<em>sd</em></span>",
    "asdasdasdasdasd",
    "asdasdasdasdasd",
    "asdasdasdasdasd",
  ];
  export let pageData: Record<string, any> = {};
  export let dpFictitiousStatisticsData: Record<string, any>[] = [];
  
  let cards = [
    { title: "设备总数（个）", value: pageData.deviceNum || 0 },
    { title: "设备状态（个）", value: pageData.deviceStatus || 0 },
  ];

  let jujiaCards = [
    { title: "服务商类别（类）", value: 25 },
    { title: "服务供应商(家)", value: 50 },
    { title: "服务人次(次)", value: 50 },
  ];
</script>

<div class="flex flex-col h-[100%] gap-4 pb-4 justify-between overflow-hidden w-full left-chart bg-[rgba(0,0,0,0.2)]">
  <!-- 第一个卡片 -->
  <div class="flex-1">
    <Card>
      <Title title="创建订单数" />
        <LineChart dpFictitiousStatisticsData={dpFictitiousStatisticsData}/>
    </Card>
  </div>
  <!-- 第二个卡片 -->
  <div class="flex-1">
    <Card>
      <Title title="成功订单金额/收益" />
      <CurveChart dpFictitiousStatisticsData={dpFictitiousStatisticsData}/>
    </Card>
  </div>
  <!-- 第三个卡片 -->
  <div class="flex-1">
    <Card>
      <Title title="经销商数量" />
      <InitPieChart pageData={pageData}/>
    </Card>
  </div>
</div>


<style scoped>
  .left-chart {
    font-size: 16px;
  }
</style>
 